<template>
  <Card>
    <div class="md:flex">
      <div :id="props.title" :style="chartStyle"></div>
    </div>
  </Card>
</template>

<script lang="ts">
import { Card } from 'ant-design-vue';
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
/* eslint-disable */

export default defineComponent({
  components: {
    Card,
  },
  props: {
    title: String,
    times: Array,
    P50: Array,
    P75: Array,
    P90: Array,
    P95: Array,
    P99: Array,
  },
  setup(props, { emit }) {
    let lineChartName = props.title;

    var option;

    const chartStyle = ref('width: 800%; height: 150%');

    watch(
      () => [props.title, props.times, props.P50, props.P75, props.P90, props.P95, props.P99],
      (val, prevVal) => {
        console.log('TopoMultiLineChart 子组件监听父组件值变化', val);
        let title = val[0];
        let times = val[1];

        let isTimesUndefined = times?.length === 0 || times == null || times == undefined;

        if (!isTimesUndefined) {
          let lineChartDom = document.getElementById(lineChartName);
          let myChart = echarts.init(lineChartDom);

          option = {
            title: {
              text: title,
              textStyle: {
                color: '#666666',
                fontWeight: 'lighter',
                fontSize: 13,
              },
            },
            grid: {
              top: '25%',
              left: '3%',
              right: '8%',
              bottom: '3%',
              containLabel: true,
            },
            legend: {
              show: true,
              type: 'scroll',
              orient: 'horizontal',
              itemHeight: 6,
              top: 14,
              left: -5,
              textStyle: {
                fontSize: 10,
              },
              data: ['P50', 'P75', 'P90', 'P95', 'P99'],
            },
            tooltip: {
              trigger: 'axis',
            },
            xAxis: {
              type: 'category',
              data: times,
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                name: 'P50',
                data: val[2],
                showSymbol: false,
                type: 'line',
              },
              {
                name: 'P75',
                data: val[3],
                showSymbol: false,
                type: 'line',
              },
              {
                name: 'P90',
                data: val[4],
                showSymbol: false,
                type: 'line',
              },
              {
                name: 'P95',
                data: val[5],
                showSymbol: false,
                type: 'line',
              },
              {
                name: 'P99',
                data: val[6],
                showSymbol: false,
                type: 'line',
              },
            ],
          };

          option && myChart.setOption(option);
        }
      },
      { immediate: true, deep: true }
    );

    onMounted(() => {});

    return {
      props,
      chartStyle,
      lineChartName,
    };
  },
});
</script>
